<template>
  <div :class="$style.container">
    <h1 :class="$style.title">
      <div>SHARE</div>
      <div>JUANPI WEBSITE</div>
    </h1>
    <div :class="$style.tips">
      <p>Please and copy Website link, </p>
      <p>Share to you friends</p>
    </div>
    <div
      :class="$style.copy"
      class="copylink"
      data-clipboard-text="http://m.juanpi.in"
    >
      http://m.juanpi.in
      <button
        class="v-button v-button-danger"
        :class="$style.button"
      >
        Copy
      </button>
    </div>
    <h1 :class="[$style.title, $style.subTitile]">
      <div>SHARE JUANPI APP</div>
      <div>BOTH GET Rs.101</div>
    </h1>
    <div :class="$style.tips">
      <p>Please and copy Website link, </p>
      <p>Share to you friends</p>
    </div>
    <div :class="$style.copy"
      class="copylink"
      :data-clipboard-text="shareUrl"
      v-if="logined"
    >
      http://mapi.in.juanpi.com/offers/share/...
      <button
        class="v-button v-button-danger"
        :class="$style.button"
      >
        Copy
      </button>
    </div>
    <div :class="$style.copy" v-else @click="goLogin">
      Login to get the link for "Refer and earn".
      <button
        class="v-button v-button-danger"
        :class="$style.button"
      >
        Login
      </button>
    </div>
    <footer :class="$style.footer" @click="hide">
      <icon name="close" />
    </footer>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Clipboard from 'clipboard'
import { button, toast, icon } from 'components'
import { auth } from 'utils'

export default {
  name: 'advertisement',
  components: {
    vButton: button,
    icon,
  },
  computed: {
    ...mapState({
      shareUrl: state => state.coupon.shareUrl,
    }),
  },
  data() {
    return {
      logined: auth.isLogin(),
    }
  },
  created() {
    if (this.logined) {
      this.$store.dispatch('getMyInviteConversionCode')
    }
  },
  mounted() {
    const clipboard = new Clipboard('.copylink')
    clipboard.on('success', () => {
      toast('copy success')
    })
  },
  methods: {
    hide() {
      this.$router.back()
    },
    goLogin() {
      sessionStorage.redirect = this.$route.fullPath
      this.$router.push({ path: '/login' })
    },
  },
}
</script>

<style module lang="scss">
.container {
  background-color: #fff;
  z-index: 8000;
  padding: 40px 30px 0 30px;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.title {
  font-size: 30px;
  font-weight: bold;
}

.tips {
  padding: 12px 0;
  p {
    line-height: 1.5;
  }
}

.copy {
  height: 30px;
  background-color: #FFE0E1;
  padding-left: 12px;
  padding-right: 5px;
  line-height: 30px;
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 8px;
  .button {
    display: inline-block;
    width: 52px;
    height: 22px;
    font-size: 12px;
    border-radius: 4px;
    float: right;
    top: 4px;
    text-align: center;
    border-width: 0;
  }
}

.subTitile {
  margin-top: 48px;
  & > div:last-child {
    color: #FF464E;
  }
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  text-align: center;
  border-top: 1px solid #e7e7e7;
  @media (-webkit-min-device-pixel-ratio: 2) {
    border-top: .5px solid #e7e7e7;
  }
  line-height: 48px;
}
</style>
